<template>
  <div class="item-case-list w">
    <div class="item-content">
      <div class="item-rotation">
        <div class="header-card">
          <banner-text
            title="算法服务"
            content="200+成熟的算法模型<br>
          聚焦产业实践，为各行业客户提供规模化、精准化、高效化的AI生产能力"
          />
        </div>
      </div>
      <div class="item-list">
        <a-affix :offset-top="120">
          <div ref="filterRef" class="list-fixed">
            <div>
              <a-input
                ref="inputRef"
                v-model:value="pageForm.algorithmName"
                v-trim
                class="h-38"
                style="width: 215px; border-radius: 8px"
                allow-clear
                placeholder="请输入算法服务名称"
                @keyup.enter="searchDataGroup()"
              >
                <template #prefix>
                  <SearchOutlined class="mr-8" />
                </template>
              </a-input>
            </div>
            <div class="anchor-box my-scrollbar">
              <div class="screen">
                <div class="screen-box">
                  <div
                    v-for="item in AnchorItems"
                    :key="item.typeId"
                    class="cursor-pointer screen-item elliptical-1"
                    :title="item.labelName"
                    :class="{ 'item-checked': selectedItem === item.typeId }"
                    @click="selectItem(item)"
                  >
                    {{ item.labelName }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </a-affix>

        <div class="list-right">
          <div class="case-box">
            <a-spin :spinning="loadingShow" class="full-screen-spin" tip="加载中">
              <div class="case-title">{{ selectedItemTitle }}</div>
              <div class="case-card">
                <algo-server-card v-for="item in dataList" :key="item.id" v-bind="item" />
              </div>
              <my-infinite-loading :empty="dataList?.length === 0" img-margin-top="68px" :identifier="identifier" @infinite="loadData" />
            </a-spin>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { debounce } from 'g6-fn'
  import { computed, ref } from 'vue'
  import { useRequest } from 'vue-request'

  import BannerText from '@/components/BannerText/index.vue'
  import { algoServiceApi } from '@/services/api'

  import AlgoServerCard from './components/AlgoServerCard.vue'
  import { AlgoServiceItem, ListPageForm } from './types'

  const pageForm = ref<ListPageForm>({
    algorithmName: '',
    typeId: '',
    columns: 'createTime',
    order: 'desc',
    offset: 1,
    limit: 10
  })
  const dataList = ref<AlgoServiceItem[]>([])
  const identifier = ref<number>(1)

  const loadData = async ($state: any) => {
    try {
      const {
        data: { records }
      } = (await algoServiceApi.list(pageForm.value)) as { data: { records: AlgoServiceItem[] } }

      if (records.length < pageForm.value.limit) {
        $state.complete()
      } else {
        pageForm.value.offset++
        $state.loaded()
      }
      dataList.value.push(...records)
    } catch (error) {
      $state.error()
    }
  }

  //anchor配置
  const AnchorItems = ref<any[]>([])
  const loadingShow = computed(() => {
    return getDictionLoading.value
  })
  //获取项目类型字典
  const { loading: getDictionLoading, runAsync: getAnchorData } = useRequest<ResponseData<any[]>>(algoServiceApi.typeList, {
    onSuccess: ({ data }) => {
      AnchorItems.value = [
        {
          labelName: '全部类型',
          typeId: ''
        },
        ...data.map((item: any) => ({ labelName: item.v, typeId: item.id }))
      ]
    }
  })

  const selectedItem = ref<number | string>('')

  const selectItem = (item: any) => {
    dataList.value = []
    selectedItem.value = item.typeId
    pageForm.value.typeId = item.typeId
    pageForm.value.offset = 1
    window.scrollTo({
      top: 0
    })
    identifier.value = new Date().getTime()
  }
  const selectedItemTitle = computed(() => {
    const selectedAnchor = AnchorItems.value?.find(item => item.typeId === selectedItem.value)
    return selectedAnchor ? selectedAnchor.labelName : ''
  })

  const searchDataGroup = debounce(() => {
    dataList.value = []
    pageForm.value.offset = 1
    window.scrollTo({
      top: 0
    })
    identifier.value = new Date().getTime()
  }, 500)

  const filterRef = ref<null | HTMLElement>(null)

  // 监听页面滚动
  getAnchorData({
    type: 'type_tag'
  })
</script>

<style lang="less" scoped>
  .item-case-list {
    position: relative;

    .item-content {
      width: 100%;

      .item-rotation {
        margin-top: 24px;
        margin-bottom: 12px;
        width: 100%;
        height: 240px;

        .header-card {
          display: flex;
          justify-content: space-between;
          align-items: center;
          overflow: hidden;
          padding: 12px 16px;
          margin-bottom: 24px;
          width: 100%;
          height: 240px;
          background: url('@/assets/img/algo-service/banner.jpg') no-repeat;
          background-size: 100% 100%;
          border: 1px solid #e6ecf5;
          border-radius: 12px;
        }
      }

      .item-list {
        position: relative;
        display: flex;
        justify-content: space-between;
        margin-top: 36px;
        gap: 64px;

        .list-fixed {
          // position: fixed;
          position: static;
          width: 209px;

          .anchor-box {
            // padding-right: 3px;
            overflow-y: auto;
            margin-top: 22px;
            max-height: 500px;

            .screen {
              position: relative;
              display: flex;
              justify-content: flex-end;
              list-style: none;
              box-sizing: border-box;
              padding-inline-start: 2px;
              // width: 215px;

              .screen-box {
                display: flex;
                min-width: 88px;
                max-width: 215px;
                height: 100%;
                text-align: right;
                flex-direction: column;
                border-right: 1px solid @border1;
                gap: 24px;
                // padding-right: 24px;
                .screen-item {
                  padding-right: 24px;
                  height: 24px;
                  font-size: 16px;
                  color: rgba(17, 22, 31, 0.75);
                  line-height: 24px; /* 150% */
                }

                .item-checked {
                  border-right: 3px solid #649af0;
                  color: #1868e9;
                  font-weight: 700;
                  line-height: 24px; /* 150% */
                }
              }
            }
          }
        }

        .list-left {
          width: 225px;
        }

        .list-right {
          flex: 1;
          display: flex;
          flex-direction: column;
          gap: 20px;

          .case-box {
            .case-title {
              margin-bottom: 20px;
              font-size: 20px;
              color: rgba(21, 23, 27, 0.95);
              font-weight: 700;
            }

            .case-card {
              display: grid;
              width: 100%;
              grid-template-columns: repeat(auto-fill, minmax(532px, 1fr));
              grid-gap: 20px;
            }
          }
        }
      }
    }
  }

  :deep(.ant-anchor-link-title) {
    font-size: 16px;
  }

  :deep(.ant-anchor-link-title-active) {
    font-weight: 700;
  }

  :deep(.ant-anchor) > :not(:last-child) {
    margin-bottom: 24px;
  }
</style>
